<template>
  <div class="main">
    <el-table :data="rowData" class="tableData" stripe height="300">
      <el-table-column
        v-for="(item, key) in fieldList"
        style="overflow-y: auto"
        :key="key"
        :prop="item.name"
        :label="item.value"
      >
          <template slot="header" v-if="isEditHeader">
              <div class="fstart">
                  <zhidian  :info="item"></zhidian>
                  <data-type-select :data-type="item.colType" :info="item"></data-type-select>
                  <text-edit :data-text="item.value"  :info="item"></text-edit>
              </div>
          </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="innerPage.currentPage||1"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="innerPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="innerPage.total"
      v-if="fieldList.length!==0"
    >
    </el-pagination>
  </div>
</template>

<script>

import Zhidian from "../../components/AInitPage/ATableRadio/zidian";
import DataTypeSelect from "../../components/AInitPage/ATableRadio/dataTypeSelect";
import TextEdit from "../../components/AInitPage/ATableRadio/textEdit";
export default {
  name: 'Grid',
    components: {TextEdit, DataTypeSelect, Zhidian},
    data () {
    return {
      // rowData: [],
      handleList: [],
      innerPage: {}
    }
  },
  methods: {
    // 每页多少条
    handleSizeChange (val) {
      this.$emit('pageData', 'SizeChange', val)
    },
    // 当前页
    handleCurrentChange (val) {
      this.$emit('pageData', 'CurrentChange', val)
    }
  },
  props: ['fieldList', 'rowData', 'page','colorConfig','isEditHeader'],
  watch:{
    colorConfig(v){
      console.log('颜色变化',v)
    },
    page(v){
      console.log('颜色')
      if(v === undefined){
        this.innerPage = {
          currentPage: 1,
          pageSize: 10,
          total: 0
        }
      }else{
        this.innerPage = v
      }
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
}
.tableData {
    overflow: auto;
}
</style>
